<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <!-- <link rel="icon" href=""> -->
  <title>客户群发</title>

  <!-- <link rel="dns-prefetch" href="//cdn.jsdelivr.net"> -->
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="yes" name="apple-mobile-web-app-capable">

  <link rel="stylesheet" href="/homemobile/kehu/css/weui.min.css">
  <link rel="stylesheet" href="/homemobile/kehu/css/base.css">

  <style>
    .section {
      padding: .3rem .24rem;
      background-color: #fff;
      border-bottom: .2rem solid #f6f6f6;
    }

    .section:last-child {
      border-bottom: 0;
    }

    .section-textarea {
      font-size: .28rem;
      padding: 7px;
      background: #f6f6f6;
      border: 1px solid #f1f1f1;
      border-radius: 3px;
    }

    .section-textarea::before {
      display: none;
    }
  </style>

</head>

<body>

  <section class="section">
    <p class="vertical-line-title">向我的客户群发消息</p>
    <div class="dot-p-box">
      <p class="dot-p">客户群发每个客户每个月仅可收到4条客户群发消息</p>
      <p class="dot-p">若管理员在后台为客户创建客户群发也会占用群发机会</p>
      <p class="dot-p">个人群发每天可给客户发送一条群发消息&nbsp;&nbsp;</p>
    </div>
  </section>

  <form action="" method="POST" enctype="multipart/form-data">

    <section class="section">
      <p class="vertical-line-title">客户筛选</p>
      <div class="d-flex align-items-center form-line">
        <div class="form-line-label">添加时间：</div>
        <div class="flex-1 d-flex align-items-center">
          <input id="startTime" type="text" name="startTime" readonly class="flex-1 form-input form-input-date"
            placeholder="开始日期">
          <span style="padding: 0 5px;">~</span>
          <input id="endTime" type="text" name="endTime" readonly class="flex-1 form-input form-input-date"
            placeholder="结束日期">
        </div>
      </div>
      <!-- 按标签筛选 -->
      <div class="d-flex align-items-center form-line">
        <div class="form-line-label">按标签筛选：</div>
        <!-- 按标签筛选：文本框 -->
        <div class="flex-1 form-multi-select include" >
            {loop $etTagArr as $ettag}
            {loop json_decode($ettag['tags'],1) as $tag}
          <div class="form-selected-block">
            <span>{$tag['name']}</span>
            <span class="form-selected-clear"></span>
          </div>
            {/loop} 
            {/loop}
        </div>
        <!-- 这一块 还有 -->

      </div>
      <input id="tags" type="hidden" name="tags">
      <div class="d-flex align-items-center form-line">
        <div class="form-line-label">排除客户：</div>
        <div class="flex-1 form-multi-select exclude">
          <span class="form-selected-placeholder">请选择标签</span>
        </div>
      </div>
      <!-- <p style="color:#666;font-size:.28rem">
        <img style="height: .28rem;vertical-align: middle;padding: 0 3px;" src="/homemobile/kehu/img/lookup.png" alt="">
        该消息预计送达人数：<span class="color1">0</span>
      </p> -->
    </section>

    <section class="section" style="border: 0;">
      <p class="vertical-line-title">群发消息设置</p>
      <p style="font-size: .28rem;color: #555;margin-bottom: 7px;">消息1：</p>
      <div class="weui-cell section-textarea">
        <div class="weui-cell__bd">
          <textarea maxlength="600" name="text_content" class="weui-textarea msg1" placeholder="请描述你所发生的问题"
            rows="4"></textarea>
          <div class="weui-textarea-counter"><span class="msg1-length">0</span>/600</div>
        </div>
      </div>
      <div class="rich-msg">
        <div class="d-flex align-items-center" style="margin-bottom: 8px;">
          <span>消息2：</span>
          <label class="flex-1">
            <input type="radio" checked value="2" name="richMsgType" data-type="pic"><span>图片</span></label>
          <label class="flex-1">
            <input type="radio" value="3" name="richMsgType" data-type="link"><span>链接</span></label>
          <label class="flex-1">
            <input type="radio" value="4" name="richMsgType" data-type="mp"><span>小程序</span></label>
          <label class="flex-1">
            <!-- <input type="radio" value="" name="richMsgType" data-type="form"><span>表单</span></label> -->
        </div>
        <!-- uploader: https://weui.io/#uploader , https://github.com/Tencent/weui.js/blob/master/docs/component/uploader.md -->
        <!-- 微信jssdk -->
        <div class="box-add rich-msg-type rich-msg-pic">
          <img onerror="this.style.display='none'" id="pic_image" src="" style="width: 100px; height: 100px;">
          <input type="hidden" name="image" id="image" />
          <button type="button" class="layui-btn select_img" data-target="image">
            上传图片
          </button>
        </div>
        <input class="rich-msg-type rich-msg-link" type="text" name="link_url" placeholder="请输入图文链接，链接地址以http或https开头">
        <input class="rich-msg-type rich-msg-link" type="text" name="link_title" placeholder="标题">
        <input class="rich-msg-type rich-msg-link" type="text" name="link_desc" placeholder="描述">
        <!-- <textarea maxlength="600" name="link_desc" class="weui-textarea rich-msg-type rich-msg-link" placeholder="描述"
            rows="4"></textarea> -->

        <div class="rich-msg-type rich-msg-link">
          <img onerror="this.style.display='none'" id="pic_link_pic" src="" style="width: 100px; height: 100px;">
          <input type="hidden" name="link_pic" id="link_pic" />
          <button type="button" class="layui-btn select_img" data-target="link_pic">
            上传图片
          </button>
        </div>


        <div class="box-add rich-msg-type rich-msg-mp">添加小程序</div>
        <div class="box-add rich-msg-type rich-msg-form">选择素材</div>
      </div>
    </section>

    <div class="d-flex align-items-center">
  
      <a href="javascript:" onClick="javascript:history.go(-1);" class="flex-1 weui-btn weui-btn_default" style="margin: .24rem;color: #666;">取消</a>
      <!-- <a href="javascript:" class="flex-1 weui-btn weui-btn_primary" style="margin: .24rem;">创建群发</a> -->
      <input type="submit" value="创建群发" class="flex-1 weui-btn weui-btn_primary" style="margin: .24rem;">
    </div>
    <input type="hidden" lay-filter="selectTime" name="selectTime" value="1" title="" checked>

    <!-- </form> -->

    <!-- 选标签模板 -->
    <div style="display: none;" id="tagsDialog" class="dialog-main">
      <p class="dialog-title">选择标签</p>
      <img onclick="closeDialog(this)" class="dialog-close" src="/homemobile/kehu/img/close.png" alt="">
      <div class="dialog-tip">
        将给选择的<span class="dialog-tag-pnum">2</span>个客户批量打标签，请选择标签
      </div>
      <!-- <?php dump($etTagArr)?> -->
      <div style="min-height: 300px;">
        {loop $etTagArr as $ettag}
        <p style="font-size: 12px;margin: 6px 0;">{$ettag['group_name']}：</p>
        <div class="d-flex flex-wrap">
          {loop json_decode($ettag['tags'],1) as $tag}
          <div class="dialog-tag" data-val="{$tag['id']}">{$tag['name']}</div>

          {/loop}
          <!-- <div class="dialog-tag disabled">一般</div>
          <div class="dialog-tag active">一般一般一般一般一般一般</div>
          <div class="dialog-tag">一般</div>
          <div class="dialog-tag">一般</div> -->
        </div>
        {/loop}

        <div style="text-align: right;margin-top: 20px;">
          <a onclick="closeDialog(this)" href="javascript:" class="weui-btn weui-btn_mini weui-btn_default"
            style="font-size:13px;margin-right:.24rem;color:#666;">取消</a>
          <a href="javascript:" onclick="cs()" class="weui-btn weui-btn_mini weui-btn_primary tag-select-confirm"
            style="font-size:13px;">确定</a>

        </div>
      </div>
      <!-- 加小程序模板 -->

      <div style="display: none;" id="mpDialog" class="dialog-main">
        <div style="margin-bottom: 13px;">
          <div class="d-flex align-items-center justify-sb" style="margin:5px auto">
            <span><span style="color: red;">*</span>小程序标题：</span>
          </div>
          <input type="text" class="form-input" name="miniprogram_title" placeholder="请输入小程序标题" style="width: 100%;">
        </div>
        <div style="margin-bottom: 13px;">
          <div class="d-flex align-items-center justify-sb" style="margin:5px auto">
            <span><span style="color: red;">*</span>小程序appid：</span>
            <a href="https://baidu.com" target="_blank">如何获取小程序appid？</a>
          </div>
          <input type="text" class="form-input" name="miniprogram_appid" placeholder="请输入小程序appid" style="width: 100%;">
        </div>
        <div style="margin-bottom: 13px;">
          <div class="d-flex align-items-center justify-sb" style="margin:5px auto">
            <span><span style="color: red;">*</span>小程序路径：</span>
            <a href="https://baidu.com" target="_blank">如何获取小程序路径？</a>
          </div>
          <input type="text" class="form-input" name="miniprogram_page" placeholder="请输入小程序路径" style="width: 100%;">
        </div>
        <div style="margin-bottom: 13px;">
          <div class="d-flex align-items-center justify-sb" style="margin:5px auto">
            <span><span style="color: red;">*</span>小程序封面：</span>
          </div>
          <div class="box-add">
            <img onerror="this.style.display='none'" id="pic_miniprogram_pic" src=""
              style="width: 100px; height: 100px;">
            <input type="hidden" name="miniprogram_pic" id="miniprogram_pic" value="" />
            <button type="button" class="layui-btn " onclick="upload(this)" data-target="miniprogram_pic">
              上传图片
            </button>
          </div>


          <p style="margin: 10px 0;"><small>建议尺寸：352*282px</small>
          </p>
        </div>
        <div style="text-align: right;margin-top: 20px;">
          <a onclick="closeDialog(this)" href="javascript:" class="weui-btn weui-btn_mini weui-btn_default"
            style="font-size:13px;margin-right:.24rem;color:#666;">取消</a>
          <a href="javascript:" class="weui-btn weui-btn_mini weui-btn_primary mp-confirm"
            style="font-size:13px;">确定</a>
        </div>
      </div>
      <!-- 表单-选择素材 -->
      <div style="display: none;" id="formDialog" class="dialog-main">
        <p class="dialog-title">自定义表单</p>
        <img onclick="closeDialog(this)" class="dialog-close" src="/homemobile/kehu/img/close.png" alt="">

        <p style="text-align: center;">还没有添加表单呦～</p>
        <div style="text-align: right;margin-top: 20px;">
          <a onclick="closeDialog(this)" href="javascript:" class="weui-btn weui-btn_mini weui-btn_default"
            style="font-size:13px;margin-right:.24rem;color:#666;">取消</a>
          <a href="javascript:" class="weui-btn weui-btn_mini weui-btn_primary form-confirm"
            style="font-size:13px;">确定</a>
          <inpou>
        </div>
      </div>
  </form>

  <!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> -->
  <script src="/homemobile/kehu/js/jquery.min.js"></script>
  <script src="/homemobile/kehu/js/weui.min.js"></script>
  <script src="/homemobile/kehu/js/common.js"></script>
  <script src="/layui/layui.js"></script>
  <script src="/js/ajax.js"></script>
  <script>
    function cs() {
      var tags = [];
      var khs = [];
      $(".active").each(function () {
        tags.push($(this).attr('data-val'))
      });
      $("#tags").val(JSON.stringify(tags));
      console.log(khs);
      console.log(tags);
      var datas = !{ "tag": tags, "kh": khs };

    }
    var tagsTrigger;
    // 日期选择
    $(document).on('click', '.form-input-date', function (e) {
      var _this = $(this)
      var date = _this.val()
      var options = {
        // start: new Date(), // 从今天开始
        start: 1990,
        end: 2030,
        // defaultValue: ['2022', '07', '07'],
        onConfirm: function (result) {
          _this.val(formatDateResult(result))
        },
        id: _this[0].id
      }
      if (date) options.defaultValue = date.split('-');
      weui.datePicker(options)
    })
    // 格式化日期选择器的结果为: 2020-10-10
    function formatDateResult(result) {
      var str = ''
      for (var i = 0; i < result.length; i++) {
        str += i === 0 ? '' : '-'
        str += result[i] > 9 ? result[i] : ('0' + result[i])
      }
      return str
    }
    //新增代码---------------------------------------------
      // $('.form-multi-select').click(function(){
      //   alert('----------===')
      // })
    // 选择标签
    $(document).on('click', '.form-multi-select', function (e) {
      tagsTrigger = $(this).hasClass('exclude') ? 1 : 0
      showDialog('#tagsDialog')
      
    })
    $(document).on('click', '.dialog-tag', function (e) {
      var _this = $(this)
      if (!_this.hasClass('disabled')) {
        _this.toggleClass('active')
      }
    })
    $(document).on('click', '.tag-select-confirm', function (e) {
      var _this = $(this)
      var pNode = _this.parentsUntil('.m-dialog')
      var selected = pNode.find('.dialog-tag.active')
      var selectedValue = ''
      for (var i = 0; i < selected.length; i++) {
        selectedValue += '<div class="form-selected-block"><span>' + selected[i].innerText + '</span><span class="form-selected-clear"></span></div>'
      }
      $(tagsTrigger ? '.form-multi-select.exclude' : '.form-multi-select.include').html(selectedValue || '<span class="form-selected-placeholder">请选择标签</span>')

      closeDialog()
    })
    $(document).on('click', '.form-selected-clear', function (e) {
      e.stopPropagation()
      $(this).parent().remove()
    })
    // 消息1字数
    $(document).on('input', '.msg1', function (e) {
      $('.msg1-length').text($(this).val().length)
    })
    // 消息2切换
    $(document).on('change', '[name=richMsgType]', function (e) {
      var _this = $(this)
      console.log(_this.val())
      var pNode = _this.parentsUntil('rich-msg')
      pNode.find('.rich-msg-type').hide()
      pNode.find('.rich-msg-' + _this.data().type).fadeIn()
    })
    // 添加小程序
    $(document).on('click', '.rich-msg-mp', function () {
      showDialog('#mpDialog')
    })
    $(document).on('click', '.mp-confirm', function (e) {
      // do something
      closeDialog()
    })
    // 添加表单 选择素材
    $(document).on('click', '.rich-msg-form', function () {
      showDialog('#formDialog')
    })
    $(document).on('click', '.form-confirm', function (e) {
      // do something
      closeDialog()
    })
  </script>
  <script>
    layui.use(['element', 'layer', 'upload'], function () {
      var layer = layui.layer;
    });
    $('.select_img').on('click', function () {
      var targetId = this.getAttribute('data-target');
      layer.open({
        title: '图片库',
        type: 2,
        area: ['300px', '350px'],
        fixed: false, //不固定
        maxmin: true,
        content: '/imgLib/lib.html?type=vshop_img&target=' + targetId
      });
    })

    function upload(t) {
      var targetId = t.getAttribute('data-target');
      layer.open({
        title: '图片库',
        type: 2,
        area: ['300px', '350px'],
        fixed: false, //不固定
        maxmin: true,
        content: '/imgLib/lib.html?type=vshop_img&target=' + targetId
      });

    }

    window.uploadImgCallback = function (tgt, url) {
      console.log('选择图片结果', tgt, url);
      if (tgt == 'image') {
        var inputEle = $('#image');
        var prevEle = $('#pic_image');
        inputEle.val(url);
        prevEle.attr('src', url);
        prevEle.show();
      } else if (tgt == 'link_pic') {
        var inputEle = $('#link_pic');
        var prevEle = $('#pic_link_pic');
        inputEle.val(url);
        prevEle.attr('src', url);
        prevEle.show();
      } else if (tgt == 'miniprogram_pic') {
        // alert(url)
        $('.m-dialog').find('#pic_miniprogram_pic').attr('src', url).show()
        $('.m-dialog').find('#miniprogram_pic').val(url)
        var inputEle = $('#miniprogram_pic');
        var prevEle = $('#pic_miniprogram_pic');
        // alert($('#miniprogram_pic').val())
        // $('#miniprogram_pic').val(url)
        // prevEle.attr('src', url);
        prevEle.show();
      }
    };
  </script>
</body>

</html>